<template>
	<div class='doc'>
		<p class='content-head'>接口文档</p>
		<Tabs :value='tab' @on-click='tabChange'>
	        <TabPane label="云数据库" name='1'></TabPane>
	        <TabPane label="云函数" name='2'></TabPane>
	    </Tabs>
		<!-- 云数据库 -->
	    <div v-show='tab==1'>
        	<div v-if='apiData.length'>
        		<div v-for='(item,index) in apiData' :key='item'>
	        		<div style='font-size:16px' class='mb10'>分组：{{item.class}}</div>
	        		<div>
	        			<div v-for='i in item.table' :key='i'>
	        				<div style='font-size:14px' class='mb10'>数据表：{{i.name}}</div>
	        				<div v-for='(api,index) in i.api' :key='index' class='doc-wrap'>
	        					<div class='doc-header' @click='toggles(item,i,index,api)'>
			        				<div class='doc-post'>{{api.method}}</div>
			        				<div class='doc-api'>{{api.api}}</div>
			        				<div class='doc-msg'>{{api.mag}}</div>
			        			</div>
		        				<div class='doc-content' v-show='apiContent==index && apiTable == i.name && apiClass == item.class'>
			        				<div v-for='tip in api.tips' :key='tip'>{{tip}}</div>
			        				<div>
			        					<div>
			        						<div v-if='!api.headers'></div>
			        						<div v-else>
			        							<div style="margin: 16px 0;font-size:16px">Headers</div>
												<Row class='mb10' v-for='(header,key,index) in api.headers' :key='key'>
					        						<Col span='6'>
							                             <Input :value='key' readonly></Input>
					        						</Col>
					        						<Col span='14' style='margin-left: 10px'>
					        							<i-switch v-if='key == "x-qingful-dev"' :value='api.headers["x-qingful-dev"]' v-model='dev' size='large' style='margin-top: 8px'>
													        <span slot="open">true</span>
													        <span slot="close">false</span>
													    </i-switch>
													    <Input v-else-if='key == "x-qingful-appid" || key == "x-qingful-appkey"' :value='header' readonly></Input>
													    <Input v-else :value='header' v-model='api_headers[key]'></Input>
					        						</Col>
					        					</Row>

					        					<Row class='mb10' v-for='(header,index) in apiHeaders' :key='index'>
					        						<Col span='6'>
							                             <Input v-model='header.key' placeholder='key' @on-blur='headerBlur'></Input>
					        						</Col>
					        						<Col span='14' style='margin-left: 10px'>
													    <Input v-model='header.value' placeholder='value' @on-blur='headerBlur'></Input>
					        						</Col>
					        						<Col span='2' style='margin-left: 10px'>
					        							<span @click='delHeader(index)' v-show='apiHeaders.length>1' style='line-height: 40px;color:#06A0FD;cursor:pointer'>删除</span>
					        						</Col>
					        					</Row>

			        						</div>
			        					</div>
										<p style="margin: 16px 0;font-size:16px">请求参数（<a href="https://cloud.qingful.com/doc/#/zh-cn/table?id=%e8%af%b7%e6%b1%82%e5%8f%82%e6%95%b0" target='_blank'>参考文档</a>）</p>

			        					<!-- GET -->
			        					<Row v-for='param in params' :key='param' v-if='apiContent==index && apiTable == i.name && apiClass == item.class && api.method == "GET"' class='mb10'>
			        						<Col span='6'>
			        							<Select v-model="param.method" @on-change='paramsSelect'>
					                                <Option v-for="(item,index) in apiDatas.method" :value="item" :key="index">{{ item }}</Option>
					                            </Select>
			        						</Col>
			        						<Col span='14' style='margin-left: 10px'>
			        							<Input v-model='param.field' @on-blur='paramsSelect'></Input>
			        						</Col>
			        					</Row>
			        					<!-- POST -->
			        					<div v-if='apiContent==index && apiTable == i.name && apiClass == item.class && api.method == "POST"'>
		        							<Row v-for="(field,index) in fields" :key="index" class='mb10' v-show='hiddenFields.indexOf(field.Field) == -1'>
		        								<Col span='6'>
		        									<div style='line-height: 40px'>{{field.Field}}</div>
		        								</Col>
		        								<Col span='14' style='margin-left: 10px'>
		        									<Input v-model='field.value' value='field.value'></Input>
		        								</Col>
		        							</Row>
			        					</div>
			        					<!-- baas.file -->
			        					<div v-if='apiContent==index && apiTable == i.name && apiClass == item.class && i.name == "baas.file"'>
			        						<Upload 
			        							multiple
			        							:action="api.api"
			        							:headers="uploadHeader(api)"
			        							:on-success="handleAddSuccess"
			        							:on-error='handleAddError'>
										        <Button icon="ios-cloud-upload-outline">上传图片</Button>
										    </Upload>
			        					</div>
			        				</div>
			        				<div style='margin-top: 16px' v-show='i.name != "baas.file"'>
			        					<Button @click='sendRequest(item,api)'>发送请求</Button>
			        				</div>
			        				<div class='mt16' v-if='result'>
			        					<p style='line-height: 32px'>Request URL</p>
			        					<div class='doc-response'>
			        						<pre>{{result.config.url}}</pre>
			        					</div>
			        					<p style='line-height: 32px'>Response Body</p>
			        					<div class='doc-response'>
			        						<pre style=''>{{result.data}}</pre>
			        					</div>
			        					<p style='line-height: 32px'>Response Code</p>
			        					<div class='doc-response'>
			        						<pre>{{result.request.status}}</pre>
			        					</div>
			        					<p style='line-height: 32px'>Response Headers</p>
			        					<div class='doc-response'>
			        						<pre>{{result.config.headers}}</pre>
			        					</div>
			        				</div>
			        				<div class='mt16' v-if='fileResult'>
			        					<p style='line-height: 32px'>Response Body</p>
			        					<div class='doc-response'>
			        						<pre style=''>{{fileResult}}</pre>
			        					</div>
			        				</div>
			        			</div>
	        				</div>
	        			</div>
	        		</div>
	        	</div>
        	</div>
        	<Row style="text-align: center;padding:50px 0" v-else>
	            <Row>
	                <Col :span="8">&nbsp;</Col>
	                <Col :span="8">
	                	<Icon type="android-notifications-none" color="#39f" size="93"></Icon>
	                </Col>
	            </Row>
	            <Row style="margin-top: 12px;">
	                <Col :span="8">&nbsp;</Col>
	                <Col :span="8">暂无数据</Col>
	            </Row>
	        </Row>
	    </div>
	    <!-- 云函数 -->
	    <div v-show='tab==2'>
        	<div v-if='functions.length'>
        		<div v-for='item in functions' :key='item'>
        			<div style='font-size:16px' class='mb10'>分组：{{item.class}}</div>
	        		
	        		<div v-for='(func,index) in item.functions' :key='func'>
        				<div class='doc-wrap'>
        					<div class='doc-header'>
		        				<Select v-model='item.cloudMethod' style='width: 80px;float: left' class='method-select'>
	                                <Option value="GET"></Option>
	                                <Option value="POST"></Option>
	                                <Option value="PUT"></Option>
	                                <Option value="PATCH"></Option>
	                                <Option value="DELETE"></Option>
	                            </Select>
		        				<div class='doc-api' @click='cloudToggles(item,func,index)'>{{func.api}}</div>
		        				<div class='doc-msg' @click='cloudToggles(item,func,index)'>{{func.remark}}</div>
		        			</div>
	        				<div class='doc-content' v-show='cloudContent==index && cloudClass == item.class'>
	        					<div>
	        						<p>云函数</p>
	        						<pre>{{func.body}}</pre>
	        					</div>
	        					<div>
		        					<div v-if='!func.headers'></div>
	        						<div v-else>
	        							<div style="margin: 16px 0;font-size:16px">Headers</div>
										<Row class='mb10' v-for='(header,key) in func.headers' :key='key'>
			        						<Col span='6'>
					                             <Input :value='key' readonly></Input>
			        						</Col>
			        						<Col span='14' style='margin-left: 10px'>
											    <i-switch v-if='key == "x-qingful-dev"' :value='func.headers["x-qingful-dev"]' v-model='dev' size='large' style='margin-top: 8px'>
											        <span slot="open">true</span>
											        <span slot="close">false</span>
											    </i-switch>
											    <Input v-else-if='key == "x-qingful-appid" || key == "x-qingful-appkey"' :value='header' readonly></Input>
											    <Input v-else :value='header' v-model='func_headers[key]'></Input>
			        						</Col>
			        					</Row>

			        					<Row class='mb10' v-for='(header,index) in funcHeaders' :key='index'>
			        						<Col span='6'>
					                             <Input v-model='header.key' placeholder='key' @on-blur='funcheaderBlur'></Input>
			        						</Col>
			        						<Col span='14' style='margin-left: 10px'>
											    <Input v-model='header.value' placeholder='value' @on-blur='funcheaderBlur'></Input>
			        						</Col>
			        						<Col span='2' style='margin-left: 10px'>
			        							<span @click='delfuncHeader(index)' v-show='funcHeaders.length>1' style='line-height: 40px;color:#06A0FD;cursor:pointer'>删除</span>
			        						</Col>
			        					</Row>

	        						</div>
		        				</div>
		        				<div>
		        					<p style="margin: 16px 0;font-size:16px">请求参数</p>
		        					<Row class='mb10'>
		        						<Col span='5' style='margin-right: 10px'>key</Col>
		        						<Col span='8'>value</Col>
		        					</Row>
		        					<Row class='mb10' v-for='param in cloudParams' key='param'>
		        						<Col span='5' style='margin-right: 10px'>
		        							<Input v-model='param.key' @on-blur='paramBlur'></Input>
		        						</Col>
		        						<Col span='8'>
		        							<Input v-model='param.value' @on-blur='paramBlur'></Input>
		        						</Col>
		        					</Row>
		        				</div>
		        				<div style='margin-top: 16px'>
		        					<Button @click='cloudRequest(item,func)'>发送请求</Button>
		        				</div>
		        				<div class='mt16' v-if='cloudResult'>
		        					<p style='line-height: 32px'>Request URL</p>
		        					<div class='doc-response'>
		        						<pre>{{cloudResult.config.url}}</pre>
		        					</div>
		        					<p style='line-height: 32px'>Response Body</p>
		        					<div class='doc-response'>
		        						<pre style=''>{{cloudResult.data}}</pre>
		        					</div>
		        					<p style='line-height: 32px'>Response Code</p>
		        					<div class='doc-response'>
		        						<pre>{{cloudResult.request.status}}</pre>
		        					</div>
		        					<p style='line-height: 32px'>Response Headers</p>
		        					<div class='doc-response'>
		        						<pre>{{cloudResult.config.headers}}</pre>
		        					</div>
		        				</div>
		        			</div>
        				</div>
	        		</div>
	        	</div>
        	</div>
        	<Row style="text-align: center;padding:50px 0" v-else>
	            <Row>
	                <Col :span="8">&nbsp;</Col>
	                <Col :span="8">
	                	<Icon type="android-notifications-none" color="#39f" size="93"></Icon>
	                </Col>
	            </Row>
	            <Row style="margin-top: 12px;">
	                <Col :span="8">&nbsp;</Col>
	                <Col :span="8">暂无数据</Col>
	            </Row>
	        </Row>
	    </div>
	</div>
</template>
<script>
	import axios from 'axios';
	export default{
		data(){
			return{
				tab:'1',
				dev:true,
				apiDatas:{},
				apiData:[],
				apiContent:-1,
				apiTable:'',
				apiClass:'',
				apiHeaders:[],
				api_headers:{},
				params:[{
					method:'',
					field:''
				}],
				postParam:{},
				result:'',
				fileResult:'',
				collapse:'1',
				fields:[],
				hiddenFields:['created_at','updated_at','deleted_at'],
				functions:[],
				cloudContent:-1,
				cloudClass:'',
				funcHeaders:[],
				func_headers:{},
				cloudParams:[{
					key:'',
					value:''
				}],
				cloudResult:'',
				header_value:[]
			}
		},
		created(){
			this.fetch('/home/app/plugins/doc/api').then(res=>{
				if(res&&res.data.data){
					this.apiDatas = res.data.data;
					this.apiData = res.data.data.data;

				}
			})
			this.fetch('/home/app/plugins/doc/function').then(res=>{
				if(res&&res.data.data){
					this.functions = res.data.data;
					for(let key in this.functions){
						this.functions[key].cloudMethod = 'GET'
					}

				}
			})
		},
		methods:{
			tabChange(name){
				this.tab = name;
			},
			toggles(item,i,index,api){
				this.params = [{
					method:'',
					field:''
				}]
				if(this.apiContent == index && this.apiTable == i.name && this.apiClass == item.class){
					this.apiContent = -1;
				}else{
					this.apiContent = index;
					this.apiTable = i.name;
					this.apiClass = item.class;
					this.fields = i.fields;

					this.apiHeaders = [{
						key:'',
						value:''
					}]
				}
				this.result = '';
				this.fileResult = '';
				this.api_headers = {};
				for(let key in api.headers){
					this.api_headers[key] = api.headers[key]
				}

			},
			//参数
			paramsSelect(params){
				for(let key in this.params){
					if(!this.params[key].method && !this.params[key].field){
						return
					}
				}
				this.params.push({
					method:'',
					field:''
				})
			},
			headerBlur(){
				for(let key in this.apiHeaders){
					if(!this.apiHeaders[key].key && !this.apiHeaders[key].value ){
						return
					}
				}
				this.apiHeaders.push({
					key:'',
					value:''
				})
			},
			delHeader(index){
				this.apiHeaders.splice(index,1)
			},
			
			//发送请求
			sendRequest(item,api){
				let url = api.api;
				let headers = {};

				for(let key in api.headers){
					if(key == 'x-qingful-appid' || key == 'x-qingful-appkey'){
						headers[key] = api.headers[key]
					}else if(key == 'x-qingful-dev'){
						headers['x-qingful-dev'] = this.dev;
					}else{
						headers[key] = this.api_headers[key]
					}

				}

				if(this.apiHeaders.length){
					for(let key in this.apiHeaders){
						if(this.apiHeaders[key].key && this.apiHeaders[key].value){
							headers[this.apiHeaders[key].key] = this.apiHeaders[key].value;
						}
						
					}
				}
				let params = [];
				for(let key in this.params){
					if(this.params[key].method && this.params[key].field){
						params.push(this.params[key].method+'='+this.params[key].field)
					}
				}
				if(params.length){
					url += '?' + params.join('&')
				}

				let data = {}
				if(api.method == 'POST'){
					for(let key in this.fields){
						if(this.hiddenFields.indexOf(this.fields[key].Field)==-1){
							data[this.fields[key].Field] = this.fields[key].value || ''
						}
						
					}
				}

				axios({
                    method:api.method,
                    headers:headers,
                    data:data,
                    url:url
                }).then(res=>{
                    if(res){
                        this.result = res;
                        this.result.config.headers = headers;
                    }
                }).catch(error=>{
                	this.result = error.response;
                	this.result.config.headers = headers;
                })
			},
			//云函数
			cloudToggles(item,func,index){
				this.cloudResult = '';
				this.cloudParams = [{
					key:'',
					value:''
				}]
				if(this.cloudContent == index && this.cloudClass == item.class){
					this.cloudContent = -1;
				}else{
					this.cloudContent = index;
					this.cloudClass = item.class;

					this.funcHeaders = [{
						key:'',
						value:''
					}]
				}

				this.func_headers = {};
				for(let key in func.headers){
					this.func_headers[key] = func.headers[key]
				}
				
			},
			paramBlur(){
				for(let key in this.cloudParams){
					if(!this.cloudParams[key].key && !this.cloudParams[key].value){
						return
					}
				}
				this.cloudParams.push({
					key:'',
					value:''
				})
			},
			funcheaderBlur(){
				for(let key in this.funcHeaders){
					if(!this.funcHeaders[key].key && !this.funcHeaders[key].value ){
						return
					}
				}
				this.funcHeaders.push({
					key:'',
					value:''
				})
			},
			delfuncHeader(index){
				this.funcHeaders.splice(index,1)
			},
			cloudRequest(item,func){
				let url = func.api;
				let headers = {}

				for(let key in func.headers){
					if(key == 'x-qingful-appid' || key == 'x-qingful-appkey'){
						headers[key] = func.headers[key]
					}else if(key == 'x-qingful-dev'){
						headers['x-qingful-dev'] = this.dev;
					}else{
						headers[key] = this.func_headers[key]
					}

				}
				
				if(this.funcHeaders.length){
					for(let key in this.funcHeaders){
						if(this.funcHeaders[key].key && this.funcHeaders[key].value){
							headers[this.funcHeaders[key].key] = this.funcHeaders[key].value;
						}
						
					}
				}

				let params = [];
				let data = {};
				
				for(let key in this.cloudParams){
					if(this.cloudParams[key].key && this.cloudParams[key].value){
						if(item.cloudMethod == 'GET'){
							params.push(this.cloudParams[key].key+'='+this.cloudParams[key].value)
						}else{
							data[this.cloudParams[key].key] = this.cloudParams[key].value;
						}
						
					}
				}
				if(params.length){
					url += '?' + params.join('&')
				}
				
				axios({
                    method:item.cloudMethod,
                    headers:headers,
                    data:data,
                    url:url
                }).then(res=>{
                    if(res){
                        this.cloudResult = res;
                        this.cloudResult.config.headers = headers;
                    }
                }).catch(error=>{
                	this.cloudResult = error.response;
                	this.cloudResult.config.headers = headers;
                })
			},
			uploadHeader(api) {
				let headers = {};
				for(let key in api.headers){
					if(key == 'x-qingful-appid' || key == 'x-qingful-appkey'){
						headers[key] = api.headers[key]
					}else if(key == 'x-qingful-dev'){
						headers['x-qingful-dev'] = this.dev;
					}else{
						headers[key] = this.api_headers[key]
					}

				}

				if(this.apiHeaders.length){
					for(let key in this.apiHeaders){
						if(this.apiHeaders[key].key && this.apiHeaders[key].value){
							headers[this.apiHeaders[key].key] = this.apiHeaders[key].value;
						}
						
					}
				}
		        return headers;
		    },
			handleAddSuccess(res){
				this.fileResult = res;
			},
			handleAddError(error){
				this.fileResult = error;
			}
		}
	}
</script>
<style scoped>
	.content-head{
		margin-bottom: 0
	}
	.doc{
		background: #fff;
		padding:40px
	}
	.doc-wrap{
		border:1px solid #06A0FD;
		background:rgba(6, 160, 253, .3);
		border-radius: 3px;
		/*overflow: hidden;*/
		font-size: 14px;
		border-bottom: 0;
		margin-bottom: 16px;
	}
	.doc-header{
		height: 30px;
		border-bottom: 1px solid #06A0FD;
		line-height: 30px;
		font-size: 14px;
		cursor:pointer;
	}
	.doc-post{
		color:#fff;
		background:#06A0FD;
		border-radius: 3px;
		width: 50px;
		height: 30px;
		line-height: 30px;
		float: left;
		text-align: center;
	}
	.doc-api{
		float: left;
		margin-left: 15px;
	}
	.doc-msg{
		float: right;
		margin-right: 15px;
	}
	.doc-content{
		padding:20px;
		border-bottom:1px solid #06A0FD;
	}
	.doc-content.active{
		border-bottom:1px solid #06A0FD;
		opacity: 1;
	}
	.doc-response{
		border:1px solid #e5e0c6;
		background:#fffce6;
		padding:0 16px;
	}
	.doc-response pre{
		word-break: break-all;
		white-space: pre-wrap;
	}
</style>
<style>
	.method-select .ivu-select-selection .ivu-select-placeholder,
	.method-select .ivu-select-selection .ivu-select-selected-value{
		height: 29px!important;
		line-height:29px!important;
	}
	.method-select .ivu-select-selection{
		height:29px!important;
	}
</style>